import React, { useRef, useState } from "react";
import {PlayCircleOutlined,PauseCircleOutlined } from '@ant-design/icons';
function PlayAudio(props) {

  const {audioUrl} = props

  const audio = useRef(null)

  const [isPlay,setPlay] = useState(false)

  const playAudio = () => {
    
    if(isPlay) {
      audio.current.pause()
    } else {
      audio.current.play()
    }

    setPlay((value)=>!value)
  }

  const ended = () => {
    setPlay(false)
  }

  return <>
  <audio ref={audio} src={audioUrl} onEnded={ended}></audio>
  {!isPlay?<PlayCircleOutlined className='icon' onClick={playAudio}/>:<PauseCircleOutlined onClick={playAudio} className='icon' />}
  </>
}

export default PlayAudio